<!DOCTYPE html>
<html>
<head>
    <title>Velocity Distribution Graph</title>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style and layout parameters
        const originX = 60;
        const originY = 300;
        const v0_unit = 100; // The horizontal length corresponding to v₀
        const a_unit = 120;  // The vertical height corresponding to a
        const axisColor = '#333333';
        const lineColor = '#000000';
        const textColor = '#000000';
        const mainLineWidth = 2;
        const axisLineWidth = 1.5;
        const dashLineWidth = 1;
        const dashPattern = [4, 4];
        const arrowSize = 8;
        const mainFontSize = 20;
        const subFontSize = 14;
        const fontFamily = 'serif';

        // --- Main Drawing Function ---
        function drawGraph() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 1. Draw Axes
            ctx.strokeStyle = axisColor;
            ctx.lineWidth = axisLineWidth;
            ctx.beginPath();
            // X-axis
            ctx.moveTo(originX, originY);
            ctx.lineTo(originX + 2.5 * v0_unit, originY);
            // X-axis arrow
            ctx.moveTo(originX + 2.5 * v0_unit - arrowSize, originY - arrowSize / 2);
            ctx.lineTo(originX + 2.5 * v0_unit, originY);
            ctx.lineTo(originX + 2.5 * v0_unit - arrowSize, originY + arrowSize / 2);
            // Y-axis
            ctx.moveTo(originX, originY);
            ctx.lineTo(originX, originY - 1.5 * a_unit);
            // Y-axis arrow
            ctx.moveTo(originX - arrowSize / 2, originY - 1.5 * a_unit + arrowSize);
            ctx.lineTo(originX, originY - 1.5 * a_unit);
            ctx.lineTo(originX + arrowSize / 2, originY - 1.5 * a_unit + arrowSize);
            ctx.stroke();

            // 2. Draw Dashed Helper Lines
            ctx.strokeStyle = axisColor;
            ctx.lineWidth = dashLineWidth;
            ctx.setLineDash(dashPattern);
            ctx.beginPath();
            // Vertical line at v₀
            ctx.moveTo(originX + v0_unit, originY);
            ctx.lineTo(originX + v0_unit, originY - a_unit);
            // Vertical line at 2v₀
            ctx.moveTo(originX + 2 * v0_unit, originY);
            ctx.lineTo(originX + 2 * v0_unit, originY - a_unit);
            // Horizontal line at a
            ctx.moveTo(originX, originY - a_unit);
            ctx.lineTo(originX + v0_unit, originY - a_unit);
            ctx.stroke();
            ctx.setLineDash([]); // Reset to solid lines

            // 3. Draw the Main Graph Plot
            ctx.strokeStyle = lineColor;
            ctx.lineWidth = mainLineWidth;
            ctx.beginPath();
            ctx.moveTo(originX, originY);
            ctx.lineTo(originX + v0_unit, originY - a_unit);
            ctx.lineTo(originX + 2 * v0_unit, originY - a_unit);
            ctx.stroke();

            // 4. Draw Labels and Text
            ctx.fillStyle = textColor;
            ctx.font = `italic ${mainFontSize}px ${fontFamily}`;

            // Origin label 'O'
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText('O', originX - 10, originY + 5);

            // Y-axis label 'Nf(v)'
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillText('Nf(v)', originX + 15, originY - 1.5 * a_unit);

            // X-axis label 'v'
            ctx.textAlign = 'left';
            ctx.textBaseline = 'middle';
            ctx.fillText('v', originX + 2.5 * v0_unit + 5, originY);

            // Value 'a' on Y-axis
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            ctx.fillText('a', originX - 8, originY - a_unit);
            
            // Value 'v₀' on X-axis
            const v0_x = originX + v0_unit;
            const label_y = originY + 8;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText('v', v0_x - 3, label_y);
            ctx.font = `italic ${subFontSize}px ${fontFamily}`;
            ctx.fillText('0', v0_x + 5, label_y + 6);
            
            // Value '2v₀' on X-axis
            const v20_x = originX + 2 * v0_unit;
            ctx.font = `italic ${mainFontSize}px ${fontFamily}`;
            ctx.fillText('2v', v20_x - 4, label_y);
            ctx.font = `italic ${subFontSize}px ${fontFamily}`;
            ctx.fillText('0', v20_x + 9, label_y + 6);
        }

        // Execute the drawing function
        drawGraph();
    </script>
</body>
</html>